<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>CSS实践</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *{
            margin:0;
            padding:0;
            overflow: hidden;
            box-sizing: border-box;
        }
        .container{
            position: relative;
            width:100%;
            margin: 0 auto;
            padding: 0 20px;
            max-width: 1140px;
        }
        .container .main{
            height: 500px;
            background-color:beige;
            border:1px solid salmon;
        }

        .column,
        .columns {
            width:100%;
            float:left;
        }
        .column{
            background-color: blanchedalmond;
            border:1px solid;
            text-align: center;
        }

        
          .one.column,
          .one.columns                    { width: 4.166666666667%; }
          .two.columns                    { width: 13.3333333333%; }
          .three.columns                  { width: 22%;            }
          .four.columns                   { width: 30.6666666667%; }
          .five.columns                   { width: 39.3333333333%; }
          .six.columns                    { width: 48%;            }
          .seven.columns                  { width: 56.6666666667%; }
          .eight.columns                  { width: 65.3333333333%; }
          .nine.columns                   { width: 74.0%;          }
          .ten.columns                    { width: 82.6666666667%; }
          .eleven.columns                 { width: 91.3333333333%; }
          .twelve.columns                 { width: 100%; margin-left: 0; }
        
          .one-third.column               { width: 30.6666666667%; }
          .two-thirds.column              { width: 65.3333333333%; }
        
          .one-half.column                { width: 48%; }
        
        
    </style>
</head>
<body>
    <div class="container main">
        <!--
        <div class="column">column</div>
        <div class="column">column</div>
        -->
        <div class="column one">1</div>
        <div class="column one">2</div>
        <div class="column one">3</div>
        <div class="column one">4</div>
        <div class="column one">5</div>
        <div class="column one">6</div>
        <div class="column one">7</div>
        <div class="column one">8</div>
        <div class="column one">9</div>
        <div class="column one">10</div>
        <div class="column one">11</div>
        <div class="column one">12</div>
        <div class="column one">13</div>
        <div class="column one">14</div>
        <div class="column one">15</div>
        <div class="column one">16</div>
        <div class="column one">17</div>
        <div class="column one">18</div>
        <div class="column one">19</div>
        <div class="column one">20</div>
        <div class="column one">21</div>
        <div class="column one">22</div>
        <div class="column one">23</div>
        <div class="column one">24</div>
        


    </div>
</body>
</html>